@use "everything" as *;

$tree-padding: calc(tree-get-var(depth) * 1.125rem + 1rem);

.link {
  @include theme-use-var(color, text-secondary-color);
  @include interaction-surface($disabled-selector: null, $css-modules: true);
  @include rtl {
    padding-left: 1rem;
    padding-right: $tree-padding;
  }

  // stylelint-disable-next-line no-duplicate-selectors
  & {
    display: block;
    padding: 0.5rem 1rem 0.5rem $tree-padding;
    position: relative;
    text-decoration: none;
  }

  @include mouse-hover {
    @include link-use-var(color);
  }

  &::after {
    @include divider-use-var(background-color, color);

    content: "";
    inset: 0 auto 0 0;
    position: absolute;
    transition: background-color $linear-duration;
    width: 0.25rem;
  }

  &[aria-current] {
    @include theme-use-var(color, text-primary-color);

    font-weight: $font-weight-bold;

    &::before {
      @include interaction-set-var(
        background-color,
        interaction-get-var(selected-background-color)
      );
    }

    &::after {
      @include theme-use-var(background-color, primary-color);
    }
  }
}
